{extend name="../builder/layout"}
{block name="style"}
<!-- 其它css -->
{notempty name="css_list"}
{volist name="css_list" id="vo"}
<link rel="stylesheet" href="{$vo}">
{/volist}
{/notempty}
<style type="text/css">
  .layui-form-select dl dd{text-align: left;}
  /*.layui-layer-admin .layui-layer-content{padding: 0;}*/
  #LAY-system-view-popup{padding: 0;}
</style>
{/block}
{block name="body"}
<div class="layui-fluid">
  <div class="layui-card">
    {$extra_html_block_top|raw|default=''}
    <!-- 选项卡 -->
    {notempty name="tab_nav"}
    <div class="layui-card-body" style="padding-left: 0;">
      <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
          {volist name="tab_nav['tab_list']" id="tab"}
          <li {eq name="tab_nav.curr_tab" value="$key"}class="layui-this"{/eq}>
          <a href="{$tab.url}{$_pop ?= '?_pop=1'}">{$tab.title|htmlspecialchars}</a>
          </li>
          {/volist}
        </ul>
      </div>
    </div>
    {/notempty}

    {$extra_html_page_tips_top|raw|default=''}

    <!-- 提醒文字 -->
    {notempty name="page_tips"}
    <div class="layui-card-body">
      <blockquote class="layui-elem-quote layui-quote-nm" style="margin:0;">{$page_tips|raw}</blockquote>
    </div>
    {/notempty}

    {$extra_html_page_tips_bottom|raw|default=''}

    <div class="layui-card-body">
      <div class="layui-row">

        <!-- 顶部按钮 -->
        <div class="layui-col-md{$top_btn_width|default='4'}">
          {notempty name="top_btns"}
          <div style="padding-bottom: 10px;">
            {volist name="top_btns" id="vo"}
            {eq name="vo.event" value="location"}
            <a href="{$vo.url|default=''}" class="layui-btn {$vo.class|default=''}" target="{$vo.target|default='_blank'}">{$vo.title}</a>
            {else/}
            <button class="layui-btn topbtn {$vo.class|default=''}" data-method="{$vo.method|default=''}" data-url="{$vo.url|default=''}" data-h="{$vo.h|default='80%'}" data-w="{$vo.w|default='50%'}" ><!--{notempty name="vo.icon"} <i class="layui-icon {$vo.icon}"></i>{/notempty}-->{$vo.title}</button>
            {/eq}
            {/volist}
          </div>
          {/notempty}
        </div>

        <!-- 搜索区域 -->
        <div class="layui-col-md{:intval(12-($top_btn_width??4))}">
          {notempty name="search"}
          <div class="layui-form" style="text-align: right" lay-filter="searchForm">
            <div class="layui-form-item">
              {volist name="search" id="vo"}
              {eq name="vo.item" value="input"}
              <div class="layui-inline">
                <label class="layui-form-label">{$vo.name}</label>
                <div class="layui-input-block">
                  <input type="{$vo.type}" name="{$vo.field}" value="{$vo.value}" placeholder="{$vo.placeholder}" autocomplete="off" class="layui-input">
                </div>
              </div>
              {/eq}
              {eq name="vo.item" value="select"}
              <div class="layui-inline">
                <label class="layui-form-label">{$vo.name}</label>
                <div class="layui-input-block">
                  <select name="{$vo.field}">
                    <option value="">{$vo.placeholder}</option>
                    {volist name="vo.extra" id="opt"}<option value="{$key}" {if ($vo.value!="") and ($key==$vo.value) }selected{/if} >{$opt|raw}</option>{/volist}
                  </select>
                </div>
              </div>
              {/eq}
              {eq name="vo.item" value="limit_date"}
              <div class="layui-inline" style="width: 300px;">
                <label class="layui-form-label">{$vo.name}</label>
                <div class="layui-input-block">
                  <input type="text" name="{$vo.field}" placeholder="{$vo.placeholder}" value="{$vo.value}"  autocomplete="off" class="layui-input limit_date" >
                </div>
              </div>
              {/eq}
              {eq name="vo.item" value="limit_date_time"}
              <div class="layui-inline" style="width: 400px;">
                <label class="layui-form-label">{$vo.name}</label>
                <div class="layui-input-block">
                  <input type="text" name="{$vo.field}" placeholder="{$vo.placeholder}" value="{$vo.value}"   autocomplete="off" class="layui-input limit_date_time" >
                </div>
              </div>
              {/eq}
              {eq name="vo.item" value="date"}
              <div class="layui-inline" style="width: 210px;">
                <label class="layui-form-label">{$vo.name}</label>
                <div class="layui-input-block">
                  <input type="text" name="{$vo.field}" placeholder="{$vo.placeholder}" value="{$vo.value}"   autocomplete="off" class="layui-input date" >
                </div>
              </div>
              {/eq}

              {/volist}

              <div class="layui-inline">
                <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-zqs-admin-search" id="searchBtn">
                  <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
              </div>
            </div>
          </div>
          {/notempty}

        </div>


      </div>
      {$extra_html_table_top|raw|default=''}
      <table id="LAY-zqs-admin-table" lay-filter="LAY-zqs-admin-table"></table>
      {$extra_html_table_bottom|raw|default=''}
    </div>

    {$extra_html_block_bottom|raw|default=''}
  </div>

</div>

{/block}
{block name="script"}
<!-- 其它js -->
{notempty name="js_list"}
{volist name="js_list" id="vo"}
<script src="{$vo}"></script>
{/volist}
{/notempty}
<script type="text/javascript">
  layui.extend({
    index: 'lib/index' //主入口模块
  }).use({:json_encode($layui_modules)}, function(){
    var $ = layui.$
            ,admin = layui.admin;
    {volist name="layui_modules" id="vo"}
    var {$vo} = layui.{$vo};
    {/volist}
      //加载数据
      table.render({
        elem: '#LAY-zqs-admin-table'
        ,url: '{$data_url|raw}' //数据接口
        ,method:'post'
        ,where:{filter:form.val('searchForm')}
        ,parseData: function(res){ //res 即为原始返回的数据
          return {
            "code": res.code, //解析接口状态
            "msg": res.msg, //解析提示文本
            "count": res.data.total, //解析数据长度
            "data": res.data.data //解析数据列表
          };
        }
        ,response: {
          statusCode: 1 //规定成功的状态码，默认：0
          ,countName: 'count' //规定数据总数的字段名称，默认：count
          ,dataName: 'data' //规定数据列表的字段名称，默认：data
        }
        ,autoSort: false //禁用前端自动排序
        ,page: {$page.open}
        ,limit: {$page.limit}
        ,limits:{$page.limits}
        ,height: '{$height}'
        ,cols: [[
          {notempty name="cols"}
          {volist name="cols" id="vo"}
          {
          {volist name="vo" id="v1" key="k"}
          {$key}:{if strpos($v1,'function') !== false }{$v1|raw}{elseif is_numeric($v1) /}{$v1}{else/}'{$v1|raw}'{/if},
      {/volist}
      },
      {/volist}
        {/notempty}
        ]]
        ,text: {
          none:'什么都没有'
        }
        });

      //监听排序事件
      table.on('sort(LAY-zqs-admin-table)', function(obj){
        var sort = {}
        sort[obj.field] = obj.type;
        table.reload('LAY-zqs-admin-table', {
          initSort: obj
          ,where: {
            sort:sort
            ,filter:form.val('searchForm')
          }
        });

      });

      //监听搜索
      $('input').on('keydown', function (event) {
        if (event.keyCode == 13) {
          $("#searchBtn").trigger("click");
          return false;
        }
      });
      form.on('submit(LAY-zqs-admin-search)', function(data){
        var field = data.field;
        // console.log(field)
        //执行重载
        table.reload('LAY-zqs-admin-table', {
          where: {filter:field}
          ,page: {
            curr: 1 //重新从第 1 页开始
          }
        });
      });

      //监听工具条--即右侧按钮
      table.on('tool(LAY-zqs-admin-table)', function(obj){
        var data = obj.data;
        var url = $(this).data('url');
        var that = this;
        //ajax请求
        if(obj.event === 'ajax-get'){
          var method = $(this).data('method')||'get';
          if ($(this).hasClass('confirm')) {
            layer.confirm('确定要这么操作？',{title:"提示"}, function(index){
              //console.log(obj)
              layer.close(index);
              admin.req({
                url: url
                ,data: {ids:data.id}
                ,type:method
                ,success: function(res){
                  if (res.code==1) {
                    layer.msg(res.msg);
                    if ($(that).hasClass('delete')) {
                      obj.del();
                    }
                    if ($(that).hasClass('reload')) {
                      table.reload('LAY-zqs-admin-table'); //数据刷新
                    }
                  }else{
                    //layer.msg(res.msg,{icon:2});
                  }

                }
              });
            });
          }else{
            admin.req({
              url: url
              ,data: {ids:data.id}
              ,type:method
              ,success: function(res){
                if (res.code==1) {
                  if ($(that).hasClass('delete')) {
                    obj.del();
                  }
                  if ($(that).hasClass('reload')) {
                    table.reload('LAY-zqs-admin-table'); //数据刷新
                  }
                }else{
                  //layer.msg(res.msg,{icon:2});
                }

              }
            });
          }

        }else if(obj.event === 'edit'||obj.event === 'iframe'){
          var tr = $(obj.tr);
          admin.popup({
            type: 2
            ,title: $(this).text()
            ,shadeClose:false
            ,content: url+'?id='+data.id
            ,area: [$(this).data('w'), $(this).data('h')]

          })
        }else if(obj.event==='url'){
          window.top.location.href = url;
        }

      });


      //顶部按钮操作
      $(document).on('click','.layui-btn.topbtn,.iframe', function(){
        var url = $(this).data('url');
        var that = this;
        if ($(this).hasClass('ajax-get')) {
          var checkStatus = table.checkStatus('LAY-zqs-admin-table')
                  ,checkData = checkStatus.data; //得到选中的数据
          //console.log(checkData)
          if(checkData.length === 0 && !$(this).hasClass('no_need_check')){
            return layer.msg('请选择数据');
          }
          var ids = [];
          $(checkData).each(function(k,v){
            ids.push(v['id']);
          });

          var method = $(this).data('method')||'post';
          if ('location' == method){
            window.open(url+'?'+$.param({'ids[]':ids}));
            return false;
          }
          if ($(this).hasClass('confirm')) {
            layer.confirm('确定要这么操作？',{title:"提示"}, function(index){
              //console.log(obj)
              layer.close(index);
              admin.req({
                url: url
                ,data: {'ids[]':ids}
                ,type:method
                ,success: function(res){
                  if (res.code==1) {
                    layer.msg(res.msg);
                    if (!$(that).hasClass('noreload')) {
                      table.reload('LAY-zqs-admin-table'); //数据刷新
                    }
                  }else{
                    //layer.msg(res.msg,{icon:2});
                  }

                }
              });
            });
          }else{
            admin.req({
              url: url
              ,data: {'ids[]':ids}
              ,type:method
              ,success: function(res){
                if (res.code==1) {
                  layer.msg(res.msg);
                  if (!$(that).hasClass('noreload')) {
                    table.reload('LAY-zqs-admin-table'); //数据刷新
                  }
                }else{
                  //layer.msg(res.msg,{icon:2});
                }

              }
            });
          }

        }else if($(this).hasClass('iframe')){
          admin.popup({
            type: 2
            ,shadeClose:false
            ,title: $(this).text()
            ,content: url
            ,area: [$(this).data('w'), $(this).data('h')]

          })
        }

      });

      //监听单元格编辑
      //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
      table.on('edit(LAY-zqs-admin-table)', function(obj){
        // console.log(obj.value); //得到修改后的值
        // console.log(obj.field); //当前编辑的字段名
        // console.log(obj.data); //所在行的所有相关数据
        var field = obj.field;
        var field_value = obj.value;
        var data = {id:obj.data.id}
        data[field] = field_value;
        admin.req({
          url: '{:url('edit')}'
          ,data: data
          ,type:'post'
          ,success: function(res){
            if (res.code==1) {
              layer.msg(res.msg);
              table.reload('LAY-zqs-admin-table')
            }else{
              //layer.msg(res.msg,{icon:2});
            }

          }
        });
      });

      //modules js
      {notempty name="layui_modules_js"}
      {volist name="layui_modules_js" id="vo"}
      {$vo.content|raw}
      {/volist}
        {/notempty}

          //日期范围选择
          laydate.render({
            elem: '.limit_date'
            ,range: true //或 range: '~' 来自定义分割字符
          });
          //日期选择
          laydate.render({
            elem: '.date'
          });
          //日期时间范围
          laydate.render({
            elem: '.limit_date_time'
            ,type: 'datetime'
            ,range: true
          });



        });
</script>
<!--工具条模板-->
<script type="text/html" id="toolBar">
  {$toolBarHtml|raw}
</script>
{/block}




